<template>
  <div class="field-merge-split">
    <el-dialog
      title="选择要拆分/合并字段的表"
      :visible.sync="mergeSplitBoxVisible"
      width="80%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <FieldMergeSplitDialogContent
        :items="sheetNameList"
        :table="table"
        :activeItem="activeSheetName"
        :type="'sheet'"
        v-on:set-active="setActive"
      ></FieldMergeSplitDialogContent>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setMergeSplitBoxVisible(false)">取 消</el-button>
        <el-button type="warning" @click="setMergeSplitBoxVisible(false, 'split')">拆分</el-button>
        <el-button type="primary" @click="setMergeSplitBoxVisible(false, 'merge')">合并</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="请选择要合并的字段"
      :visible.sync="mregeBoxVisible"
      width="80%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <FieldMergeSplitDialogContent
        :items="sheetFieldList"
        :table="table"
        :activeItem="activeField"
        :checkbox="true"
        :type="'checkbox-field'"
        v-on:set-active="setActive"
        v-on:set-val="setVal"
      ></FieldMergeSplitDialogContent>

      <el-dialog
        width="30%"
        title="合并字段"
        :visible.sync="mergeFieldSetBoxVisible"
        append-to-body
        v-loading="loading"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div>
          <el-input v-model="mergeFieldName" placeholder="请输入合并后的字段名" style="margin-bottom:15px" />
          <el-input v-model="connector" placeholder="请输入合并的连接符" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="mergeFieldSetBoxVisible = false">取消</el-button>
          <el-button type="primary" @click="merge">合并</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setMregeBoxVisible('last')">上一步</el-button>
        <el-button type="primary" @click="setMregeBoxVisible('merge')">合并</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请选择要拆分的字段" :visible.sync="splitBoxVisible">
      <el-dialog
        width="30%"
        title="拆分字段"
        :visible.sync="splitBoxSetVisible"
        append-to-body
        v-loading="loading"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-input v-model="connector" placeholder="请输入拆分的连接符" style="margin-bottom:10px;" />
        <el-input v-model="newColumn1" placeholder="拆分的字段1" style="margin-bottom:10px;" />
        <el-input v-model="newColumn2" placeholder="拆分的字段2" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="splitBoxSetVisible = false">取消</el-button>
          <el-button type="primary" @click="split">拆分</el-button>
        </span>
      </el-dialog>
      <FieldMergeSplitDialogContent
        :items="sheetFieldList"
        :table="table"
        :activeItem="activeField"
        :type="'field'"
        v-on:set-active="setActive"
      ></FieldMergeSplitDialogContent>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setSplitBoxVisible('last')">上一步</el-button>
        <el-button type="primary" @click="setSplitBoxVisible('split')">拆分</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FieldMergeSplitDialogContent from "@/components/common/FieldMergeSplitDialogContent.vue";

export default {
  components: {
    FieldMergeSplitDialogContent,
  },
  props: ["mergeSplitBoxVisible"],
  computed: {
    sheetNameList() {
      return this.$store.getters.getSheetNameList;
    },
    sheetLoadList() {
      return this.$store.state.loadSheet.loadSheetList;
    },
  },
  data() {
    return {
      activeSheetName: null,
      activeField: null,
      table: "",
      sheetFieldList: [],
      mregeBoxVisible: false,
      splitBoxVisible: false,
      splitBoxSetVisible: false,
      mergeFieldSetBoxVisible: false,
      mergeFieldList: [],
      mergeFieldName: "",
      connector: "",
      newColumn1: "",
      newColumn2: "",

      loading: false,
      loadingText: "服务端正在处理......",
    };
  },
  watch: {
    activeSheetName(val) {
      this.table = this.getTable(val);
    },
    sheetLoadList() {
      this.table = this.getTable(this.activeSheetName);
      this.sheetFieldList = this.getFieldList(this.activeSheetName);
    },
  },
  methods: {
    setMergeSplitBoxVisible(val, state) {
      if (state && !this.activeSheetName) {
        this.$message.error("请选择要合并/拆分的表格");
        return;
      }

      if (state == "merge") {
        this.mregeBoxVisible = true;
      } else if (state == "split") this.splitBoxVisible = true;

      this.$emit("set-merge-split-box-visible", val);
    },
    setSheetNameActive(sheetName) {
      this.activeSheetName = sheetName;
      this.table = this.getTable(sheetName);
      this.sheetFieldList = this.getFieldList(sheetName);
    },
    setFieldActive(field) {
      this.activeField = field;
    },
    setMregeBoxVisible(state) {
      if (state == "last") {
        this.mregeBoxVisible = false;

        this.setMergeSplitBoxVisible(true);
      } else {
        if (this.mergeFieldList.length < 1) {
          this.$message.error("请选择要合并的字段");
          return;
        } else {
          this.mergeFieldSetBoxVisible = true;
        }
      }
    },
    setSplitBoxVisible(state) {
      if (state == "last") {
        this.splitBoxVisible = false;

        this.setMergeSplitBoxVisible(true);
      } else {
        if (this.activeField == "" || !this.activeField) {
          this.$message.error("请选择要拆分的字段");
          return;
        } else {
          this.splitBoxSetVisible = true;
        }
      }
    },
    setVal(val, type) {
      if (type == "sheet") {
        this.sheetName = val;
      } else if (type == "field") {
        this.field = val;
      } else if (type == "checkbox-field") {
        this.mergeFieldList = val;
      }
    },
    setActive(val, type) {
      if (type == "sheet") {
        this.activeSheetName = val;

        this.sheetFieldList = this.getFieldList(this.activeSheetName);
      } else if (type == "field") {
        this.activeField = val;
      }
    },
    getFieldList(sheetName) {
      for (let sheetLoad of this.sheetLoadList) {
        if (sheetName == sheetLoad.showName) {
          return sheetLoad.columns;
        }
      }
    },

    getTable(sheetName) {
      for (let sheetLoad of this.sheetLoadList) {
        if (sheetName == sheetLoad.showName) {
          return sheetLoad.table;
        }
      }
    },
    merge() {
      let sheet_name = this.activeSheetName;
      let column_names = this.mergeFieldList;
      let new_column_name = this.mergeFieldName;
      let symbol = this.connector;

      let data = {
        sheet_name,
        column_names,
        new_column_name,
        symbol,
      };

      this.loadingText = "正在进行合并，请稍等......";
      this.loading = true;

      if (sheet_name && column_names.length > 0 && new_column_name != "") {
        this.$axios
          .post("/merge", data)
          .then((res) => {
            this.loading = false;

            if (res.code == 200) {
              this.$store.commit("setLoadSheet", res.data);

              this.mergeFieldSetBoxVisible = false;
              this.mregeBoxVisible = false;
            } else this.$message.error(res.msg);
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.$message.error("请填写“合并后的字段名”");
        return;
      }
    },
    split() {
      let sheet_name = this.activeSheetName;
      let column_name = this.activeField;
      let newColumn1 = this.newColumn1;
      let newColumn2 = this.newColumn2;
      let symbol = this.connector;
      let column_names = [newColumn1, newColumn2];

      let data = {
        sheet_name,
        column_name,
        column_names,
        symbol,
      };

      this.loadingText = "正在进行拆分，请稍等......";
      this.loading = true;

      this.$axios
        .post("/separate", data)
        .then((res) => {
          this.loading = false;

          if (res.code == 200) {
            this.$store.commit("setLoadSheet", res.data);
            this.splitBoxVisible = false;
            this.splitBoxSetVisible = false;

            this.$message({
              type: "success",
              message: res.msg,
            });
          } else this.$message.error(this.msg);
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
</style>